<template>
    <div class="homeHeaderBody">
        <section class="homeHeaderLeft">
            <router-link :to='{name:"Home"}' tag="div">
                <div  :class='$route.path == "/" ?"dataChoose":""'>数据中心</div>
            </router-link>
            <router-link :to='{name:"About"}' tag="div">
                <div  :class='$route.path == "/about" ?"dataChoose":""'>模板中心</div>
            </router-link>
            <router-link :to='{name:"ReportCenter"}' tag="div">
                <div  :class='$route.path == "/reportCenter" ?"dataChoose":""'>报告中心</div>
            </router-link>
            <router-link :to='{name:"Inews"}' tag="div">
                <div  :class='$route.path == "/inews" ?"dataChoose":""'>配置模板</div>
            </router-link>
        </section>
        <section class="homeHeaderRight">
            <div class="homeHeaderRightIndex">
                指标管理
            </div>
            <div>
                <el-menu :default-active="activeIndex"
                         class="el-menu-demo"
                         mode="horizontal"
                         @select="handleSelect"
                         text-color="black"
                         :router="isRouter"
                >
                    <el-submenu index="2">
                        <template slot="title">张小盒</template>
                        <el-menu-item index="/">数据中心</el-menu-item>
                        <el-menu-item index="/about">模板中心</el-menu-item>
                        <el-menu-item index="">选项3</el-menu-item>
                        <el-submenu index=""  popper-class="innerHorizontal" popper-style="position:none">
                            <template slot="title">选项4</template>
                            <el-menu-item index="">选项1</el-menu-item>
                            <el-menu-item index="">选项2</el-menu-item>
                            <el-menu-item index="">选项3</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                </el-menu>
            </div>
        </section>
    </div>
</template>

<script>
    export default {
        name: "HomeHeader",
        data() {
            return {
                isRouter:true,
                activeIndex: '1',
                activeIndex2: '1',
            };
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
        }
    }
</script>

<style scoped>
    a{
        text-decoration: none;
        color: black;
    }

    .homeHeaderBody{
        width: 100%;
        /*border: 1px solid red;*/
        box-sizing: border-box;
        padding: 6px 8px 8px 8px;
        display: flex;
        background-color: white;
    }

    .homeHeaderLeft{
        /*padding-top: 12px;*/
        flex-grow: 1;
        padding-left: 4px;
        /*border: 1px solid yellow;*/
        display: flex;
        flex-wrap: wrap;
    }
    .homeHeaderRightIndex,
    .homeHeaderLeft>div{
        box-sizing: border-box;
        padding: 0 10px;
        font-size: 18px;
        font-weight: 500;
        margin-right: 30px;
        margin-top: 8px;
        width: 110px;
        height: 58px;
        background-color: #ddd;
    }
    .homeHeaderRight{
        padding: 0 30px;
        box-sizing: border-box;
        width: 550px;
        /*border: 1px solid blue;*/
        display: flex;
        justify-content: space-between;
    }

    .homeHeaderLeft>div{
        box-sizing: border-box;
    }
    .dataChoose{
        padding-bottom: 24px;
        border-bottom-color: blueviolet;
        border-bottom: 2px solid blueviolet;
    }
</style>
<style>
    .innerHorizontal{
        left: -200px!important;
    }
    .el-menu.el-menu--horizontal{
        border-bottom-color: transparent!important;
    }
    .el-menu-demo .el-submenu__title{
        font-size: 16px!important;
    }
    .el-menu--horizontal .el-menu .el-menu-item,
    .el-menu--horizontal .el-menu .el-submenu__title{
        font-size: 16px!important;
    }
</style>